<template>
  <div class="box">
    <el-form :model="paperInfo.composePaper" ref="composePaperRef">
      <ul>
        <li>
          <el-form-item label="组卷题库选择"
                        prop="paperId"
                        :rules="[{required: true, message: '请选择题库', trigger: 'change'}]">
            <el-select v-model="paperInfo.composePaper.paperId" class="m-2" placeholder="请选择题库">
              <el-option
                  v-for="(item,index) in paperInfo.paper"
                  :key="index"
                  :label="item.id +': '+item.paperName"
                  :value="item.id"
              />
            </el-select>
          </el-form-item>
        </li>
        <li>
          <el-form-item label="选择题科目选择"
                        prop="choiceSubject"
                        :rules="[{required: true, message: '请选择选择题科目', trigger: 'change'}]">
            <el-select v-model="paperInfo.composePaper.choiceSubject"
                       class="m-2"
                       placeholder="请选择题库科目"
                       @change="choiceChange">
              <el-option
                  v-for="(item,index) in paperInfo.choiceSubject"
                  :key="index"
                  :label="item.choiceSubject +': '+item.choiceNumber + '道'"
                  :value="item"

              />
            </el-select>
          </el-form-item>
        </li>
        <li>
          <el-form-item label="选择题数量"
                        prop="choiceNumber"
                        :rules="[
                            {required: true, message: '请输入选择题数量', trigger: 'change'},
                            {validator: checkChoiceNumber, trigger: 'change'},]">
            <el-input type="text" placeholder="题库所需选择题数量" v-model="paperInfo.composePaper.choiceNumber"></el-input>
          </el-form-item>
        </li>
        <li>
          <el-form-item label="填空题科目选择"
                        prop="fillSubject"
                        :rules="[{required: true, message: '请选择填空题科目', trigger: 'change'}]">
            <el-select v-model="paperInfo.composePaper.fillSubject"
                       class="m-2"
                       placeholder="请选择题库科目"
                       @change="fillChange">
              <el-option
                  v-for="(item,index) in paperInfo.fillSubject"
                  :key="index"
                  :label="item.fillSubject +': '+item.fillNumber + '道'"
                  :value="item"

              />
            </el-select>
          </el-form-item>
        </li>
        <li>
          <el-form-item label="填空题数量"
                        prop="fillNumber"
                        :rules="[
                            {required: true, message: '请输入填空题数量', trigger: 'change'},
                            {validator: checkFillNumber, trigger: 'change'},]">
            <el-input type="text" placeholder="题库所需填空题数量" v-model="paperInfo.composePaper.fillNumber"></el-input>
          </el-form-item>
        </li>
        <li>
          <el-form-item label="判断题科目选择"
                        prop="judgeSubject"
                        :rules="[{required: true, message: '请选择判断题科目', trigger: 'change'}]">
            <el-select v-model="paperInfo.composePaper.judgeSubject"
                       class="m-2"
                       placeholder="请选择题库科目"
                       @change="judgeChange">
              <el-option
                  v-for="(item,index) in paperInfo.judgeSubject"
                  :key="index"
                  :label="item.judgeSubject +': '+item.judgeNumber + '道'"
                  :value="item"

              />
            </el-select>
          </el-form-item>
        </li>
        <li>
          <el-form-item label="判断题数量"
                        prop="judgeNumber"
                        :rules="[
                            {required: true, message: '请选择题库', trigger: 'change'},
                            {validator: checkJudgeNumber, trigger: 'change'},]">
            <el-input type="text" placeholder="题库所需判断题数量" v-model="paperInfo.composePaper.judgeNumber"></el-input>
          </el-form-item>
        </li>
        <li>
          <el-button type="primary" @click="create()">立即组卷</el-button>
        </li>
      </ul>
    </el-form>
  </div>
</template>

<script>
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
import AES from "@/utils/AESUtil";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router/dist/vue-router";


export default {
  name: "addComposePaper",
  setup(){
    const router = useRouter()
    const {proxy} = getCurrentInstance()
    // eslint-disable-next-line no-undef
    const role = ref(AES.Decrypt($cookies.get("role")))
    let composePaperRef = ref(null)
    let paperInfo = reactive({
      paper: [],
      composePaper: {
        // eslint-disable-next-line no-undef
        questionCreatorId: $cookies.get('id'),
        choiceSubject: null,
        fillSubject: null,
        judgeSubject: null,
        paperId: null,
        choiceNumber: null,
        fillNumber: null,
        judgeNumber: null
      },
      choiceSubject: [],
      fillSubject: [],
      judgeSubject: [],
      select: {
        choiceNumber: null,
        fillNumber: null,
        judgeNumber: null
      }
    })
    let checkChoiceNumber = (rule,value,callback) => {
      const boolean = new RegExp('^[1-9][0-9]*$').test(value)
      if (!boolean) {
        callback(new Error('请输入正整数'))
      }
      if (value > paperInfo.select.choiceNumber){
        callback(new Error('数量超过'))
      }else {
        callback()
      }
    }
    let checkFillNumber = (rule,value,callback) => {
      const boolean = new RegExp('^[1-9][0-9]*$').test(value)
      if (!boolean) {
        callback(new Error('请输入正整数'))
      }
      if (value > paperInfo.select.fillNumber){
        callback(new Error('数量超过'))
      }else {
        callback()
      }
    }
    let checkJudgeNumber = (rule,value,callback) => {
      const boolean = new RegExp('^[1-9][0-9]*$').test(value)
      if (!boolean) {
        callback(new Error('请输入正整数'))
      }
      if (value > paperInfo.select.judgeNumber){
        callback(new Error('数量超过'))
      }else {
        callback()
      }
    }
    onMounted(()=>{
      getInfo()
    })
    function getInfo(){
      if (role.value === '1') {
        proxy.$axios.get(
            // eslint-disable-next-line no-undef
            `/manage/mypaper/${$cookies.get('id')}`
        ).then(
            response => {
              paperInfo.paper = response.data
            },
            error => {
              console.log('请求失败', error.message)
            }
        )
        proxy.$axios.get(//选择题
            // eslint-disable-next-line no-undef
            `/manage/choice/subnum/${$cookies.get('id')}`
        ).then(
            response => {
              paperInfo.choiceSubject = response.data
            },
            error => {
              console.log('请求失败', error.message)
            }
        )
        proxy.$axios.get(//填空题
            // eslint-disable-next-line no-undef
            `/manage/fill/subnum/${$cookies.get('id')}`
        ).then(
            response => {
              paperInfo.fillSubject = response.data
            },
            error => {
              console.log('请求失败', error.message)
            }
        )
        proxy.$axios.get(//判断题
            // eslint-disable-next-line no-undef
            `/manage/judge/subnum/${$cookies.get('id')}`
        ).then(
            response => {
              paperInfo.judgeSubject = response.data
            },
            error => {
              console.log('请求失败', error.message)
            }
        )
      }else if(role.value === '0'){
        proxy.$axios.get(
            `/manage/paper`
        ).then(
            response => {
              paperInfo.paper = response.data
            },
            error => {
              console.log('请求失败', error.message)
            }
        )
        proxy.$axios.get(
            // eslint-disable-next-line no-undef
            `/manage/choice/subnum`
        ).then(
            response => {
              paperInfo.choiceSubject = response.data
            },
            error => {
              console.log('请求失败', error.message)
            }
        )
        proxy.$axios.get(
            // eslint-disable-next-line no-undef
            `/manage/fill/subnum`
        ).then(
            response => {
              paperInfo.fillSubject = response.data
            },
            error => {
              console.log('请求失败', error.message)
            }
        )
        proxy.$axios.get(
            // eslint-disable-next-line no-undef
            `/manage/judge/subnum`
        ).then(
            response => {
              paperInfo.judgeSubject = response.data
            },
            error => {
              console.log('请求失败', error.message)
            }
        )
      }
    }
    function choiceChange(val){
      paperInfo.composePaper.choiceSubject = val.choiceSubject
      paperInfo.select.choiceNumber = val.choiceNumber
    }
    function fillChange(val){
      paperInfo.composePaper.fillSubject = val.fillSubject
      paperInfo.select.fillNumber = val.fillNumber
    }
    function judgeChange(val){
      paperInfo.composePaper.judgeSubject = val.judgeSubject
      paperInfo.select.judgeNumber= val.judgeNumber
    }
    function create(){
      proxy.$refs.composePaperRef.validate((valid) => {
        if (valid) {
          proxy.$axios.post(
              // eslint-disable-next-line no-undef
              `/compose/paper`,
              {...paperInfo.composePaper}
          ).then(
              response => {
                if (response.data){
                  ElMessage({
                    type: 'success',
                    message: '组卷成功',
                  })
                  router.push({path: '/manage'})
                }else {
                  ElMessage({
                    type: 'error',
                    message: '组卷失败',
                  })
                }
              },
              error => {
                console.log('请求失败', error.message)
              }
          )
        }else {
          return false
        }
      })
    }
    return{
      paperInfo,
      composePaperRef,
      checkChoiceNumber,
      checkFillNumber,
      checkJudgeNumber,
      choiceChange,
      fillChange,
      judgeChange,
      create
    }
  }
}
</script>

<style scoped>
.box {
  padding: 0px 20px;
}

.box ul li {
  margin: 10px 0px;
  display: flex;
  align-items: center;
}

.box ul li .el-input {
  width: 100%;
}

.box ul li .w150 {
  margin-left: 20px;
  width: 7%;
}
</style>